<template>
    <el-card>
      <div class="header">
        <!-- 搜索头部 -->
        <el-row :gutter="24" >
          <!-- 添加新闻按钮 -->
          <el-col :span="8">
            <el-button @click="addArtical">
              <i class="el-icon-plus"></i>
              添加新闻
            </el-button>
          </el-col>
          <!-- 右边部分 -->
          <el-col :span="14">
            <el-row :gutter="20" justify="center" >
              <!-- 搜索框 -->
              <el-col :span="7">
                <el-input
                  type="text"
                  placeholder="搜索文章标题"
                  v-model="searchList.artical.name">
                  <el-col :span="1" slot="append">
                    <!-- 搜索按钮 -->
                    <el-button type="primary" icon="el-icon-search" @click="searchArtical"></el-button>
                  </el-col>
                </el-input>
              </el-col>
              <!-- 轮播位置下拉框 -->
              <el-col :span="5">
                <el-select v-model="searchList.artical.desc">
                  <el-option
                    v-for="item in articalTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <!-- 状态位置下拉框 -->
              <el-col :span="5">
                <el-select v-model="searchList.inUse">
                  <el-option
                    v-for="item in shelfStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table :data="searchArticalList" style="width: 100%" class="table" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column label="标题" prop="name" align="center"> </el-table-column>
          <el-table-column label="分类" prop="desc" align="center"> </el-table-column>
          <el-table-column label="发布时间" prop="releaseTime" align="center"> </el-table-column>
          <el-table-column label="排序" prop="sort" align="center"> </el-table-column>
          <el-table-column label="状态" prop="inUse" align="center">
              <template slot-scope="scope">
                  <p :class="{inuse:(scope.row.inUse)}">{{ (scope.row.inUse)?'上架':'下架' }}</p>
              </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="150px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchList.page"
          :page-sizes="[5,10,15,20,25]"
          :page-size="searchList.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total=count
          align="center"
          class="pagenation">
        </el-pagination>
      </div>
    <!-- 编辑对话框 -->
    <el-dialog title="修改文章" :visible.sync="editFormVisible" width="40%" center class="edit">
      <!-- 内容主题部分 -->
      <el-row :gutter="20">
        <el-col :span="16" :offset="4">
          <el-form :model="editForm" label-width="90px" label-position="right" :rules="rules">
            <!--标题 -->
            <el-form-item label="标题" prop="name">
              <el-input v-model="editForm.name" ></el-input>
            </el-form-item>
            <!-- 文章分类 -->
            <el-form-item label="文章分类" prop="desc">
                <el-select v-model="editForm.desc">
                    <el-option
                        v-for="item in editArticalTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 发布时间 -->
            <el-form-item label="发布时间" prop="releaseTime">
              <el-date-picker
                  v-model="editForm.releaseTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right">
              </el-date-picker>
            </el-form-item>
            <!-- 排序 -->
            <el-form-item label="排序" prop="sort">
              <el-input v-model="editForm.sort"></el-input>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="状态" prop="isUse">
                <el-select v-model="editForm.inUse">
                    <el-option
                        v-for="item in editShelfStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 跳转连接 -->
            <el-form-item label="跳转连接" prop="url">
              <el-input
                v-model="editForm.url"
                placeholder="请输入跳转连接/artical/10格式"></el-input>
            </el-form-item>
            <!-- 一句话介绍 -->
            <el-form-item label="一句话介绍" prop="introduce" >
              <el-input
                v-model="editForm.introduce"
                placeholder="请输入文章来源"></el-input>
            </el-form-item>
            <!-- 文章正文 -->
            <el-form-item label="详细描述" prop="words" class="context">
              <quill-editor ref="text" v-model="editForm.context" class="myQuillEditor" placeholder="请输入正文" :options="editorOption" />
            </el-form-item>
            <!-- 图片 -->
            <el-form-item label="图片" prop="img" class="image">
              <el-upload
                class="upload-demo"
                drag
                action="/oss/service/file/upload"
                :limit=1
                :on-success="upLoadImg">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，尺寸为750*360
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 编辑模态框 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submmitEditForm">
            确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 删除模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="delDialogVisible"
      width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="delDialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="deleArtical">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {getHandler,delHandler,editHandler} from '../../http/content'
export default {
  name: "Artical",
  data() {
    // 跳转连接正则
    var jumpUrl = (rule, value, callback) => {
      let articalUrlReg = /\/artical\/\d+$/g;
      if (value == "") {
        callback(new Error("请输入跳转url"));
      } else if (!articalUrlReg.test(value) && value != "") {
        callback(new Error("请输入正确的跳转url"));
      } else {
        callback();
      }
    };
    var Vsort = (rule, value, callback) => {
      let sortReg = /^\d+$/g;
      if (value == "") {
        callback(new Error("请输入正整数"));
      } else if (!sortReg.test(value) && value != "") {
        callback(new Error("请输入正确的正整数"));
      } else {
        callback();
      }
    };
    return {
      //文章总数
      count:null,
      //置顶
      radio:null,
      //富文本
      editorOption:{},
      //发送给后端的请求参数列表
      searchList: {
        artical:{
          desc: '',
          name:'',
        },
        page:1,
        size:5,
        inUse: 2
      },
      //删除模态框
      delDialogVisible:false,
      //获取文章列表
      searchArticalList: [],
      //主页文章分类
      articalTypes: [
        {
          value: "",
          label: "全部分类",
        },
        {
          value: "关于我们",
          label: "关于我们",
        },
        {
          value: "公告",
          label: "公告",
        },
        {
          value: "帮助中心",
          label: "帮助中心",
        }
      ],
      //编辑文章分类
      editArticalTypes: [
        {
          value: "关于我们",
          label: "关于我们",
        },
        {
          value: "公告",
          label: "公告",
        },
        {
          value: "帮助中心",
          label: "帮助中心",
        }
      ],
      //主页上架状态
      shelfStatus: [
        {
          value: 2,
          label: "全部状态",
        },
        {
          value: 1,
          label: "上架",
        },
        {
          value: 0,
          label: "下架",
        },
      ],
      //编辑上架状态
      editShelfStatus: [
        {
          value: true,
          label: "上架",
        },
        {
          value: false,
          label: "下架",
        },
      ],
      //编辑模态框状态
      editFormVisible: false,
      //编辑表单
      editForm: {},
      //删除id
      nowId:null,
      //规则
      rules: {
        name: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 100 个字符", trigger: "blur" },
        ],
        url: [{ validator: jumpUrl, trigger: "blur" }],
        sort: [
          { min: 1, max: 5, message: "长度在 1 到 10 个字符", trigger: "blur" },
          { validator: Vsort, trigger: "blur" },
        ],
      },
    }
  },
  created(){
    this.searchList.page = 1;
    this.getArtical();
  },
  methods: {
    //编辑
    handleEdit(index, row) {
      this.editFormVisible = true;
      //返回数据，自动填写编辑表单
      this.editForm = {...row};
    },
    //显示编辑模态框
    showEditDialog() {
      this.editDialogVisible = true;
    },
    //编辑上传图片
    upLoadImg(response){
      this.editForm.img = response.data.fileUrl;
    },
    //取消编辑
    cancelEdit(){
      this.editDialogVisible = false;
      this.editForm = {};
    },
    //提交编辑表单
    submmitEditForm(){
      let path = '/article/edit';
      editHandler(path,this.editForm)
      .then(res => {
        if(res.data.code != 20000) {
          this.nowId = null;
          return this.$message.error(res.data.message);
        }
        this.editFormVisible = false;
        this.$message.success('编辑成功');
        this.nowId = null;
        this.editForm = {};
        this.getArtical();
        
      })
      .catch(err => {
        this.$message.error(err);
      })
    },
    //编辑
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    //新增轮播
    addArtical() {
      this.$router.push("/content/artical/addArtical");
    },
    // 分页
    //每页的大小改变
    handleSizeChange(newSize) {
      this.searchList.size = newSize;
      console.log(newSize);
      console.log(this.size,111);
      this.getArtical();
    },
    //当前页改变
    handleCurrentChange(newSize) {
      console.log(newSize);
      this.searchList.page = newSize;
      this.getArtical();
    },
    //条件搜索
    searchArtical(){
      this.searchList.page = 1;
      this.getArtical();
    },
    //搜索
    getArtical(){
      let path = '/article/selectLikeOthers';
      console.log(this.searchList,111);
      getHandler(path,this.searchList)
        .then(res => {
          console.log(res,'文章数据');
          this.searchArticalList = res.data.data.result.agreement;
          this.count = res.data.data.result.count;
        })
        .catch(err => {
          console.log('请求失败', err);
      })          
    },
    //弹出删除模态框
    handleDelete(row) {
      this.delDialogVisible = true;
      this.nowId = row.id;
    },
    //确认删除
    deleArtical(){
      let path = '/article/delete';
      delHandler(path,this.nowId)
      .then(res => {
        if(res.data.code != 20000) {
          this.nowId = null;
          return this.$message.error(res.data.message);
        }
        this.$message.success('删除成功');
        this.nowId = null;
        this.delDialogVisible = false;
        let totalPage = Math.ceil((this.count - 1) / this.searchList.size);
        this.searchList.page = this.searchList.page>totalPage ? totalPage:this.searchList.page;
        this.searchList.page=this.searchList.page<1 ? 1:this.searchList.page;
        console.log(this.searchList.page);
        this.getArtical();
      })
      .catch(err => {
        this.$message.error(err);
      })
    },
    //删除文章
    delArtical(){
      let path = '/article/delete';
      delHandler(path,this.nowId)
      .then(res => {
        if(res.data.code != 20000) {
          this.nowId = null;
          return this.$message.error(res.data.message);
        }
        this.$message.success('删除成功');
        this.nowId = null;
        this.delDialogVisible = false;
        if(this.searchArticalList.length == 0){
          this.searchList.page -=1;
          this.getArtical();
        }else{ 
          this.getArtical();
        }
      })
      .catch(err => {
        this.$message.error(err);
      })
    }
  }     
};
</script>

<style scoped lang="less">
.header {
  min-width: 1170px;
}
//上架状态颜色
.inuse{
    color: green;
}
//表格
.table {
  margin-top: 20px;
}
//正文
.context{
  height: 300px;
  overflow: auto;
}
.image {
  margin-top:50px ;
}
// 分页
.pagenation{
    margin-top: 20px;
}
</style>